<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-type-contents ddp-resize2 ddp-type2">
  <!-- 닫기 버튼 -->
  <a href="javascript:" class="ddp-btn-close" (click)="close()"></a>
  <!-- 닫기 버튼 -->
  <div class="ddp-icon-name">
    <div class="ddp-ui-name2 ddp-type3">
      {{'msg.dp.ui.ds.create.title' | translate : {type : 'DB'} }}
      <span class="ddp-txt-info">{{'msg.dp.ui.db.sub.title' | translate}}</span>
      <em class="ddp-bg-order-line3-type"></em>
    </div>
  </div>
  <!-- import -->
  <div class="ddp-type-contents-in ddp-type">
    <!-- dp connection -->
    <div class="ddp-ui-dbconnect">

      <div class="ddp-edit-setting">

        <div class="ddp-wrap-edit3 ddp-type ddp-mgt0">
          <label class="ddp-label-type ddp-bold ">{{'msg.storage.ui.db.connection' | translate}}</label>
          <!-- edit option -->
          <div class="ddp-ui-edit-option">
            <component-paging-search-select *ngIf="connectionList.length > 0; else noConnection"
              (onSelected)="onConnectionSelected($event)"
              (onLoadPage)="onScrollPage($event)"
              [defaultIndex]="getConnectionDefaultIndex()"
              [array]="connectionList"
              [isEnableObjectKey]="true"
              [objectKey]="'name'"
              [pageNum]="pageResult.number"
              [usePlaceholder]="true"
              [isConnection]="true"
              [isOptionToLeft]="true"
              [unselectedMessage]="'msg.storage.ui.load.dconn' | translate">
            </component-paging-search-select>

            <ng-template #noConnection>
              <component-paging-search-select
                (onSelected)="onConnectionSelected($event)"
                (onLoadPage)="onScrollPage($event)"
                [defaultIndex]="getConnectionDefaultIndex()"
                [array]="connectionList"
                [isEnableObjectKey]="true"
                [objectKey]="'name'"
                [pageNum]="pageResult.number"
                [usePlaceholder]="true"
                [isConnection]="true"
                [isOptionToLeft]="true"
                [unselectedMessage]="'msg.storage.ui.load.dconn' | translate">
              </component-paging-search-select>
            </ng-template>
          </div>

          <!-- //edit option -->
        </div>
      </div>

      <app-connection [isDisableChangeConnectionType]="true"
                      [isDisableChangeConnectionInfo]="true"
                      [isDisableProperties]="true"
                      [isHideConnectionLabel]="true">
      </app-connection>

    </div>
    <!-- //dp connection -->

  </div>
  <!-- //import -->

  <!-- buttons -->
  <div class="ddp-ui-buttons">
    <a href="javascript:" class="ddp-btn-type-popup" (click)="close()">{{'msg.comm.btn.cancl' | translate}}</a>
    <a href="javascript:" class="ddp-btn-type-popup ddp-bg-black" (click)="next()">{{'msg.comm.btn.next' | translate}}</a>
  </div>
  <!-- //buttons -->
</div>
